<template>
    <div>
        <div class="header">
            <span class="title1">类型管理</span>
            <div class="search">
                <div style="position: absolute">
                    分类
                    <el-radio style="padding-left: 24px" v-model="radio" label="1" @change="change1">昌东镇</el-radio>
                    <el-radio v-model="radio" label="2" @change="change1">村/社区</el-radio>
                    关键字：
                    <el-input style="width: 271px" v-model="input" placeholder="请输入关键字"></el-input>
                    <el-button style="margin-left: 15px" type="primary"
                        @click="getDetail(this.id, this.input)">搜索</el-button>

                </div>
                <el-button type="primary" @click="dialog = true" class="addButton">新增</el-button>
            </div>
        </div>
        <div class="body1">
            <div style="height: 61px; position: relative; border-bottom: 1px solid #ededed">
                <div>
                    <el-button v-for="(data, index) in list1" :key="data.id" class="button2"
                        :class="{ highlight: index == activeButtonIndex }" type="text" @click="selectButton(index)">
                        {{ data.name }}
                    </el-button>
                </div>
            </div>
            <!-- <div >
                <p v-if="isNullMsg">1111</p>
            </div> -->
            <el-table :data="tableData"  style="width: 100%" :show-header="false">
                <template v-slot:empty>
                    <div style="width: 500px;height: 900px;position: absolute;top: 250px;">
                        <img src="../../assets/image/nullDate.png" alt="Empty Image">
                    </div>
                </template>
                <el-table-column label="Column">
                    <template v-slot="scope">
                        <div style="color: #3d3d3d; font-size: 20px; padding-left: 20px">
                            {{ scope.row.name }}
                        </div>
                        <div style="color: #3d3d3d; padding-left: 20px">
                            {{ scope.row.createTime1 }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="" width="200px">
                    <template v-slot="scope">
                        <div style="color: #999999; font-size: 14px; text-align: right;padding-right: 20px;">类型:{{
                            scope.row.typeStr }}/{{this.list1[this.activeButtonIndex].name}} </div>
                    </template>
                </el-table-column>
                <el-table-column width="150px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="setStr(scope.row)">修改</el-button>
                        </div>
                        <div style="padding-top: 7px;">
                            <el-button type="danger" @click="deleteMsg(scope.row.id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加 -->
        <el-dialog :close-on-click-modal="false" title="新增" v-model="dialog" width="492px" height="400px">
            <div style="font-size: 23px; color: #35353f; padding-left: 58px">
                分类：
                <el-input :placeholder="this.input2 + '/' + this.list1[this.activeButtonIndex].name" :disabled="true"
                    style="width: 285px; height: 44px"> </el-input>
            </div>
            <div style="font-size: 23px; color: #35353f; padding-left: 58px; padding-top: 36px">
                类型：
                <el-input placeholder="请输入标题名称" v-model="this.titleName" style="width: 285px; height: 44px"> </el-input>
            </div>
            <!-- <div style="padding-top: 42px;">
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="add1()" size: medium
                        style="margin-left: 132px;width: 282px;height: 38px;">确
                        定</el-button>
                </span>
            </div> -->

            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="add1()" size="medium"
                        style="width: 282px; height: 38px;position: relative;right: 36px;">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog :close-on-click-modal="false" title="修改" v-model="dialog2" width="492px" height="400px">
            <div style="font-size: 23px; color: #35353f; padding-left: 58px">
                分类：
                <el-input :placeholder="this.input2 + '/' + this.list1[this.activeButtonIndex].name" :disabled="true"
                    style="width: 285px; height: 44px;"> </el-input>
            </div>

            <div style="font-size: 23px; color: #35353f; padding-left: 58px; padding-top: 36px">
                类型：
                <el-input :placeholder="请输入标题名称" v-model="this.str" style="width: 285px; height: 44px"> </el-input>
            </div>
            <!-- <div style="padding-top: 42px;">
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="update1()" size: medium
                        style="margin-left: 132px;width: 282px;height: 38px;">确
                        定</el-button>
                </span>
            </div> -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="update1()" size="medium"
                        style="margin-left: 132px; width: 282px; height: 38px;position: relative;right: 36px;">确
                        定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { TShirt } from '@icon-park/vue-next'

export default {
    name: 'systemSettingsNewsType',

    components: {},
    data() {
        return {
            isNullMsg: false,
            typeStr: '',
            activeButtonIndex: 0,
            updateId: '',
            str: '',
            input2: '镇',
            dialog: false,
            dialog2: false,
            input: '',
            radio: '1',
            id: 1,
            deleteId: '',
            type: 1,
            titleName: '',
            list1: [],
            tableData: [],
        }
    },
    created() {
        this.getList()
        this.getDetail()
    },
    methods: {
        selectButton(buttonIndex) {
            this.activeButtonIndex = buttonIndex // 更新选中的按钮索引
            const buttonId = this.list1[buttonIndex].id
            this.getDetail(buttonId) // 处理点击事件
        },
        update1() {
            this.$http
                .post('axh/newType/updateType', {
                    id: this.updateId,
                    name: this.str,
                })
                .then((res) => {
                    this.str = ''
                    this.dialog2 = false
                    this.getDetail()
                })
        },
        setStr(row) {
            this.str = row.name
            this.updateId = row.id
            this.dialog2 = true
        },
        getList() {
            this.$http
                .post('axh/newType/list', {
                    type: this.radio,
                })
                .then((res) => {
                    this.list1 = res.result
                    this.id = this.list1[0].id
                })
        },
        getDetail(fid, name) {
            if (fid != null) {
                this.id = fid
            }
            if (name != null || name != '') {
                this.input = name
            }
            this.$http
                .post('axh/newType/listById', {
                    id: this.id,
                })
                .then((res) => {
                    this.tableData = res.result
                })
        },
        change1() {
            if (this.radio == 1) {
                this.input2 = '镇'
            } else {
                this.input2 = '村/社区'
            }
            this.selectButton(0)
            this.getList()
            setTimeout(() => {
                this.getDetail(this.id)
            }, 200)
        },
        deleteMsg(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteId = id
                this.$http
                    .post('axh/newType/deleteById', {
                        id: this.deleteId,
                    })
                    .then((res) => {
                        this.getDetail()
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        add1() {
            this.dialog = false
            if (!this.titleName) {
                this.$message.error('标题名称不能为空')
            } else {
                this.$http
                    .post('axh/newType/createType', {
                        pid: this.id,
                        name: this.titleName,
                        type: this.radio,
                        isValid: 1,
                    })
                    .then((res) => {
                        this.getDetail()
                        this.titleName = ''
                    })
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.highlight {
    color: #2c83e4 !important; // 高亮背景色
    font-weight: 700 !important;
}

.body1 {
    margin-top: 19px;
    margin-left: 22px;
    width: 97%;
    height: 689px;
    background: white;
    position: relative;

    .button2 {
        margin-left: 24px;
        margin-top: 24px;
        color: #666666;
        width: 65px;
        height: 21px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 400;
        line-height: 21px;
    }

}

.header {
    position: relative;
    width: 97%;
    height: 148px;
    background: #ffffff;
    margin-left: 28px;
    margin-top: 21px;

    .title1 {
        top: 29px;
        left: 16px;
        color: #2c83e4;
        font-size: 24px;
        font-weight: 700;
        display: block;
        position: absolute;
    }

    .search {
        position: relative;
        height: 54px;
        top: 103px;
        left: 16px;

    }

    .addButton {
        position: absolute;
        width: 102px;
        height: 40px;
        top: -45px;
        right: 90px;
    }
}
</style>